<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--
  dom   文档对象模型     html
  1.  标签   标签节点
  2.  标签属性   属性节点
  3.  标签内容   内容节点
  4.  css样式
-->

<p class="p2">hello dom1</p>
<p id="p1" class="p2">hello dom2</p>
<p class="p2">hello dom3</p>
<p class="p2">hello dom4</p>
<span class="p2">hello dom5</span>

<script>
    // 如何获取节点对象   1. 标签名字    HTMLCollection  伪数组   []
    let p = document.getElementsByTagName('p')
    console.log(p)
    // 通过索引获取具体的节点对象
    console.log(p[0])
    console.log(p[1])
    console.log('-------------------------------')
    //  2. 根据id 获取标签对象   返回符合要求的单个节点对象
    let p_id = document.getElementById('p1')
    console.log(p_id)
    console.log('------------------------------')
    // 3.  通过class属性获取节点对象   多个   HTMLCollection  伪数组   []
    let p_class = document.getElementsByClassName('p2')
    console.log(p_class)
    console.log(p_class[0])
    console.log(p_class[1])
    console.log('------------------------------')
    // 4.  querySelector()  参数  选择器   返回第一个符合要求的节点对象
    // let p_selector = document.querySelector('p')
    // let p_selector = document.querySelector('.p2')
    let p_selector = document.querySelector('#p1')
    console.log(p_selector)

    console.log('------------------------------')
    // 5.  querySelectorAll()   返回所有符合要求的节点对象
    // let p_selector_all = document.querySelectorAll('p')
    let p_selector_all = document.querySelectorAll('.p2')
    console.log(p_selector_all)
</script>

</body>
</html>
